<template>
  <div>
    <HomeTop></HomeTop>
    <!-- 自动回复开关 -->
    <van-cell center title="设置自动回复" style="font-weight: 800; font-size: 15px">
      <template #right-icon>
        <van-switch v-model="ReplySwitch" ref="switch" size="20" />
      </template>
    </van-cell>
    <!-- 自动回复文本 -->
    <van-radio-group v-model="replyText">
      <van-cell-group inset>
        <van-cell v-for="(item, index) in replytitle" :key="index" :title="item" clickable @click="replyText = item">
          <template #right-icon>
            <van-radio :name="item" style="margin-left: 20px" />
          </template>
        </van-cell>
        <van-cell clickable @click="replyText = custom">
          <van-field style="margin-left: -15px" v-model="custom" label="自定义" label-align="top" placeholder="请输入回复文本" />
          <template #right-icon>
            <van-radio :name="custom" style="margin-left: 20px" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { setReply } from '../../stores/autoReply'
import HomeTop from '../../components/homeTop/index.vue'

// 引入自动回复仓库
const replyStore = setReply()

// 回复文本
const custom = ref('')
const replytitle = ref(['正在忙，稍后为您解答！', '请先详细描述下您的情况！', '我每天下午5:00-7:00之间有空, 将会在那个时间段回复您！'])

// 自动回复开关
const ReplySwitch = ref(replyStore.state)
watch(ReplySwitch, (newVal) => {
  replyStore.setReply(newVal as boolean)
  console.log(replyStore.state)
})

// 回复文本
const replyText = ref(replyStore.text)
watch(replyText, (newVal) => {
  replyStore.setText(newVal as string)
  console.log(replyStore.text)
})
</script>